import { listAppVoByPageUsingPost } from '@/services/backend/appController';
import { Card, Col, Row } from 'antd';
import Meta from 'antd/es/card/Meta';
import { useEffect, useState } from 'react';
import DetailModal from './components/DetailModal';

const PublicAppPage: React.FC = () => {
	const [appList, setAppList] = useState<API.App[]>([]);
	const [queryParam, setQueryParam] = useState<API.AppQueryRequest>({
		reviewStatus: 1,
	});
	const [appId , setAppId] = useState<number>(-1);
	useEffect(() => {
		listAppVoByPageUsingPost(queryParam).then((res) => {
			setAppList(res.data?.records || []);
		});
	}, [queryParam]);

	const [detailVisible, setDetailVisible] = useState(false);
	const checkAppDetail = (appId: number) => {
		if(appId < 0) {
			return;
		}
		setAppId(appId);
		setDetailVisible(true);
	}

	return (
		<>
			<Row gutter={24}>
				{appList.map((item) => (
					<Col className="gutter-row" span={6} key={item.id}>
						<Card
							hoverable
							style={{ marginBottom : '10px'}}
							cover={<img alt="example" src={item.appIcon} />}
							onClick={() => {
								checkAppDetail(item.id? item.id : -1);
							}}
							key={item.id}
						>
							<Meta title={item.appName} description={item.appDesc} />
						</Card>
					</Col>
				))}
			</Row>
			<DetailModal
				visible={detailVisible}
				appId={appId}
				onCancel={() => {
					setDetailVisible(false);
				}}
			/>
		</>
	);
};

export default PublicAppPage;
